<template>
 <!-- 轮播图组件 -->
  <view class="w-full">
    <view class="page-section swiper">
      <view class="page-section-spacing">
        <swiper class="swiper" :indicator-dots="options.indicatorDots" :autoplay="options.autoplay" :interval="options.interval" :duration="options.duration" circular style="height: 375rpx">
          <swiper-item v-for="(item, index) in swipers" :key="index">
            <view class="swiper-item" @tap="event(item)"><image :src="item.src" mode="aspectFill" lazy-load style="height: 375rpx"></image></view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    swipers: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
   return {
     
   }
  },
  methods: {
    event(item) {
      console.log(item)
    }
  }
}
</script>

<style scoped>
::v-deep .uni-swiper-dots-horizontal {
  border-radius: 15%;
}

::v-deep	uni-swiper .uni-swiper-dot {
  width: 46rpx;
  height: 7rpx;
  margin: 0;
  border-radius: 0;
  background-color: rgba(255, 255, 255, .3)
}

::v-deep	uni-swiper .uni-swiper-dot-active {
  border-radius: 15%;
  background-color: white;
}
</style>